<!-- 首页 -->
<template>
  <div class="homePage basePageBox">
    <div class="homeBanner">
      <Banner :bannerList="newsData" v-if="newsData.length"></Banner>
      <img
        v-if="!newsData.length"
        class="bannerImg"
        src="@/assets/footerBg.png"
        alt=""
        srcset=""
      />
      <NewsUpdates :newsData="newsData"></NewsUpdates>
    </div>
    <!-- 热门好课 -->
    <div class="hotCourse">
      <CustomTitle title="教师研修">
        <el-tabs class="elTab" v-model="activeId" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in tabsData"
            :key="'tab' + index"
            :label="item.name"
            :name="item.objectId"
          ></el-tab-pane>
        </el-tabs>
      </CustomTitle>
      <div class="contentArea" v-loading="courseLoading">
        <div class="hotCourseList">
          <CourseCard
            v-for="(item, index) in hotCourseList"
            :key="'hot' + index"
            :cardData="item"
          ></CourseCard>
        </div>
        <el-empty
          v-if="!hotCourseList.length"
          description="暂无数据"
        ></el-empty>
      </div>
    </div>
    <!-- 近期培训 -->
    <div class="hotCourse" v-if="trainList.length && !isStatic">
      <CustomTitle title="近期培训"></CustomTitle>
      <div class="contentArea" v-loading="trainLoading">
        <div class="hotCourseList">
          <TrainingCard
            v-for="(item, index) in trainList"
            :cardData="item"
            :key="'lately' + index"
            @updateData="getTrainList"
          ></TrainingCard>
        </div>
        <el-empty v-if="!trainList.length" description="暂无数据"></el-empty>
      </div>
    </div>
    <!-- 集体备课活动 -->
    <div class="hotCourse" v-if="teachList.length && !isStatic">
      <CustomTitle title="集体备课">
        <div class="lookAll" @click="toRouter('/teach')">
          全部
          <i class="el-icon-arrow-right icon"></i>
        </div>
      </CustomTitle>
      <div class="contentArea" v-loading="teachLoading">
        <div class="hotCourseList">
          <TeachCard
            v-for="(item, index) in teachList"
            :key="'premium' + index"
            :cardData="item"
          ></TeachCard>
        </div>
        <el-empty v-if="!teachList.length" description="暂无数据"></el-empty>
      </div>
    </div>
    <!-- 专家风采 -->
    <!-- <div class="hotCourse">
      <CustomTitle title="专家风采">
        <div class="lookAll" @click="toRouter('/expert')">
          全部
          <i class="el-icon-arrow-right icon"></i>
        </div>
      </CustomTitle>
      <div class="contentArea" v-loading="expertLoading">
        <div class="expertList">
          <ExpertCard
            class="expertItem"
            v-for="(item, index) in expertList"
            :key="'premium' + index"
            :cardData="item"
          ></ExpertCard>
        </div>
        <el-empty v-if="!expertList.length" description="暂无数据"></el-empty>
      </div>
    </div> -->
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import NewsUpdates from './components/NewsUpdates.vue';
import Banner from './components/Banner.vue';
import CustomTitle from '@/components/CustomTitle.vue';
import CourseCard from '@/components/CourseCard.vue';
import TrainingCard from '@/components/TrainingCard.vue';
// import ExpertCard from '@/components/ExpertCard.vue';
import TeachCard from '@/components/TeachCard.vue';
import { getNewsData } from '@/api/news';
import { getCourseByCondition } from '@/api/course';
import { getTrainByCondition } from '@/api/training';
import { getTeachByCondition } from '@/api/teach';
import { getExpertByCondition } from '@/api/expert'
import { isStatic } from '@/utils/baseConfig'

export default {
  name: 'Home',
  components: {
    NewsUpdates,
    Banner,
    CustomTitle,
    CourseCard,
    TrainingCard,
    // ExpertCard,
    TeachCard,
  },
  data() {
    return {
      isStatic,
      newsData: [],
      tabsData: [],
      activeId: '',
      hotCourseList: [],
      courseLoading: true,
      trainList: [],
      trainLoading: true,
      teachList: [],
      teachLoading: true,
      expertList: [],
      expertLoading: true
    };
  },
  created() {
  },
  mounted() {
    this.getNewsList();
    this.getType();
    this.getTrainList();
    this.getTeachList();
    this.getExpertList();
  },
  methods: {
    ...mapActions(['getAllType']),
    // 获取新闻
    async getNewsList() {
      try {
        const resData = await getNewsData({
          pageNum: 1,
          pageSize: 3,
        });
        console.log(resData)
        this.newsData = resData.list;
      } catch (error) {
        console.error(error);
      }
    },

    // 获取分类
    async getType() {
      try {
        const resData = await this.getAllType({ type: 'COURSE' });
        this.tabsData = resData;
        this.activeId = resData[0].objectId;
        this.getHotCourse();
      } catch (error) {
        console.error(error);
      }
    },
    // 点击课程分类
    handleClick(tab, event) {
      console.log(tab, event);
      this.getHotCourse();
    },

    // 获取热门好课
    async getHotCourse() {
      try {
        this.courseLoading = true;
        const params = {
          pageNum: 1,
          pageSize: 16,
          categoryId: this.activeId,
          orderBy: 'IS_HOT',
        };
        const resData = await getCourseByCondition(params);
        this.hotCourseList = resData.list;
        this.courseLoading = false;
      } catch (error) {
        console.error(error);
        this.courseLoading = false;
      }
    },

    // 获取 近期培训
    async getTrainList() {
      try {
        this.trainLoading = true;
        const params = {
          pageNum: 1,
          pageSize: 8,
        };
        const resData = await getTrainByCondition(params);
        this.trainList = resData.list;
        this.trainLoading = false;
      } catch (error) {
        this.trainLoading = false;
        console.error(error);
      }
    },

    // 获取 集体备课活动
    async getTeachList() {
      try {
        this.teachLoading = true;
        const params = {
          pageNum: 1,
          pageSize: 8,
        };
        const resData = await getTeachByCondition(params);
        this.teachList = resData.list;
        this.teachLoading = false;
      } catch (error) {
        this.teachLoading = false;
        console.error(error);
      }
    },

    // 获取 专家
    async getExpertList() {
      try {
        this.expertLoading = true;
        const params = {
          pageNum: 1,
          pageSize: 8
        };
        const resData = await getExpertByCondition(params);
        this.expertList = resData.list;
        this.expertLoading = false;
      } catch (error) {
        this.expertLoading = false;
        console.error(error);
      }
    },
    
    toRouter(url) {
      this.$router.push(url);
    },
  },
};
</script>

<style scoped lang="scss">
.homePage {
  padding-bottom: 50px;
  .homeBanner {
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
    .bannerImg {
      width: 1026px;
      height: 332px;
      border-radius: 8px;
      overflow: hidden;
      object-fit: cover;
    }
  }
  .hotCourse {
    margin-top: 26px;
    .lookAll {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: $text-color-secondary;
      cursor: pointer;
      &:hover {
        color: $primary-color;
      }
    }
    .contentArea {
      margin-top: 17px;
      .hotCourseList {
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(4, 1fr);
      }
      .expertList {
        width: 100%;
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(6, 1fr);
        .expertItem {
          margin-bottom: 0;
        }
      }
    }
    .elTab {
      margin-left: 46px;
    }
    ::v-deep .el-tabs__header {
      margin: 0;
      .el-tabs__nav-wrap {
        &:after {
          display: none;
        }
        .el-tabs__item {
          font-size: 16px;
          font-weight: 600;
          height: 30px;
          line-height: 30px;
          // padding: 0 18px;
        }
        .el-tabs__active-bar {
          height: 2Px;
          background-color: $primary-color;
        }
      }
    }
  }
}
</style>
